<template>
    <div id="class-det">
        <el-breadcrumb separator="/" class="common-bread">
            <el-breadcrumb-item :to="{ path: '/class' }">班级管理</el-breadcrumb-item>
            <el-breadcrumb-item>班级详情</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="form mt10 contentBox">
            <div class="list_head">
                <span class="head_name">班级信息</span>
                <el-button type="primary" @click="$router.push('/class')" class="fr">返回</el-button>
            </div>
            <el-form label-width="120px" :model="form" ref="form" disabled>
                <el-form-item label="学校：" prop="schoolName" required>
                    <el-input v-model="form.schoolName"></el-input>
                </el-form-item>

                <el-form-item label="年级：" prop="gradeId" required>
                    <el-select v-model="form.gradeId" @change="getSavedClassIndex">
                        <el-option :label='item.gradeName' :value='item.gradeId' :key='item.gradeId' v-for="item in grades"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="班级：" prop="classIndex" required>
                    <el-select v-model="form.classIndex">
                        <el-option :label='item.label' :value='item.value' :key='item.value' v-for="item in classes"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="班级名称：" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="班级编号：" prop="classCode">
                    <el-input v-model="form.classCode"></el-input>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import { mapState, mapActions } from "vuex";
    export default {
        data() {
            return {
                id: this.$util.getUrlParam("id"),
                schoolId: "",
                grades: [],
                classes: [],
                teachers: [],
                form: {
                    classCode: "",
                    schoolName: "",
                    name: "",
                    gradeId: "",
                    classIndex: ""
                }
            }
        },
        computed: mapState({ user: state => state.user }),
        mounted() {
            this.$util.setStore("classSelect", 1);
            this.getDetail();
        },
        methods: {
            //根据年级和学校获取已经存在班级序号
            getSavedClassIndex() {
                let list = [];
                let newArray = [];
                for (let i = 0; i < 20; i++) {
                    if (!list.includes(i)) newArray.push({ label: i + 1 + "班", value: i + 1 });
                }
                this.classes = newArray;
            },
            //获取学校详情
            getDetail() {
                this.$axios.get("/adminapi/v1/tools/classes/info?classId=" + this.id).then(response => {
                    if (response.data.error == 10000) {
                        let info = response.data.data;

                        this.schoolId = info.schoolId;
                        this.grades = this.$util.getGrades();
                        this.getSavedClassIndex();

                        this.form = {
                            schoolName: info.schoolName,
                            gradeId: info.grade,
                            classIndex: info.number * 1,
                            name: info.name,
                            classCode: info.classNumber,
                            teacherId: info.teacherId
                        };

                    }
                })
            },
        }
    }
</script>
<style>
    #class-det .el-select {
        width: 300px;
    }

    #class-det .el-date-editor.el-input,
    #class-det .el-date-editor.el-input__inner {
        width: 300px;
    }

    #class-det .el-select>.el-input,
    #class-det .select-head>.el-input {
        width: 300px;
    }
</style>